import React, { useState, useEffect } from 'react';
import { Modal, Tabs } from 'antd';

import { useDispatch, useSelector } from 'react-redux';
import { setBackgroundVisible } from '@/store/reducers/setting';
import ImageItem, { IBackground } from './ImageItem';

import './styles/setting.less';

interface WatermarkProps {
	imageList: Array<IWatermarkList>;
	onSelect: Function;
	selectedID: number;
	deleteBackground: (id: number) => void
}

export interface IWatermarkList {
	type: string; // 'none', // none | blur | custom | image
	position: number;
	id: number;
	url: string;
	abbreviatedUrl: string;
	api?: string;
	apiClear?: string;
	fileName?: string;
}



const Watermark = (props: WatermarkProps) => {
	const { imageList, onSelect, selectedID, deleteBackground } = props;

	return (
		<div className="background-box">
			<div className='watermark-image-wrapper'>
				<div className="image-wrapper">
					{imageList.map((item: any, index: number) => {
						return <ImageItem deleteBackground={deleteBackground} key={index} id={item.id} url={item.url} isDefault={item.isDefault} abbreviatedUrl={item.abbreviatedUrl} type={item.type} isSelect={item.id === selectedID} watermark={true} onSelect={onSelect} />;
					})}
				</div>
			</div>

		</div>
	);
};

export default Watermark;
